<template>
  <!-- 车品管理列表的每一项商品项卡片 -->
  <view class="card-item-container">
    <view class="guan-item">
      <view class="box-top flex flex-ai-c" @tap="goDetail(item.id)">
        <view class="box-left">
          <image :src="item.picture_Path" mode="aspectFill"></image>
          <view v-show="item.added_Status === 1" class="zhez">已下架</view>
        </view>
        <view class="box-right">
          <view class="box-name text-line2">{{ item.goods_Name }}</view>
          <view class="box-right-item">
            <view class="text-line">
              <text style="color:#EB5C02;font-weight: bold;">￥{{ item.price }}</text>
            </view>
            <view class="text-line">
              <text>库存：{{ item.count }}</text>
            </view>
          </view>
          <view class="box-right-item">
            <view class="text-line">
              <text>总销量：{{ item.salesVolume }}</text>
            </view>
            <view class="text-line">
              <text>添加人：{{ item.accountName }}</text>
            </view>
          </view>
          <view class="box-right-item">
            <view class="text-line">
              <text>{{ item.added_Status === 0 ? '上架' : '下架' }}时间：</text>
              <text>{{ item.added_Status_Time.replace(/T/, ' ') }}</text>
            </view>
            <view></view>
          </view>
        </view>
        
        <!-- 右边箭头 -->
        <view class="icon-right">
          <u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
        </view>
      </view>
      <view class="box-bottom flex flex-ai-c flex-jc-sb">
        <view class="box-item flex flex-ai-c flex-jc-c" @click="goEditPage(item.id)">
          <i-icon icon="iconbianji" type="multiple" size="36rpx"></i-icon>
          <text>编辑</text>
        </view>
        <view class="box-item flex flex-ai-c flex-jc-c" @click="$emit('onShareClick', item.id)">
          <i-icon icon="iconfenxiang1" type="multiple" size="36rpx"></i-icon>
          <text>分享</text>
        </view>
      </view>
    </view>    
  </view>
</template>

<script>
  export default {
    name: 'cardItem',
    
    props: {
      item: {
        type: Object,
        default: () => ({})
      }
    },
    
    data() {
      return {}
    },
    
    methods: {
      // 跳转到车品详情页面
      goDetail(id) {
        uni.navigateTo({
          url: `/pages_carGoods/carGoodsDetail/carGoodsDetail?id=${id}&status=preview`
        })
      },
      
      // 跳转到编辑发布界面
      goEditPage(id) {
        uni.navigateTo({
          url: `/pages_carGoods/addEditCarGoods/addEditCarGoods?id=${id}&type=edit`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.card-item-container {
  padding: 0 24rpx;
}
  
.guan-item {
  margin-top: 23rpx;
  padding: 0 20rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
  border-radius: 10rpx;
  
  .box-top {
    padding: 20rpx 0;
    height: 100%;
    border-bottom: 1rpx solid #EEEEEE;
    
    .box-left {
      width: 190rpx;
      height: 190rpx;
      position: relative;
      align-self: flex-start;
      
      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
    .box-right {
      flex: 1;
      margin-left: 20rpx;
      // line-height: 25rpx;
      
      .box-name {
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
        background-color: #fff;
        line-height: 50rpx;
      }
      .box-right-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 22rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }
    }
    
    // 右边箭头
    .icon-right {
      transform: translate(14rpx, 20rpx);
    }
  }
  .box-bottom {
    height: 80rpx;
    
    text{
      margin-left: 20rpx;
    }
    
    // 编辑分享按钮样式
    .box-item {
      flex: 0.5;
      height: 60rpx;
      text-align: center;
      font-size: 30rpx;
      font-weight: 500;
      color: #666666;
      
      &:first-child {
        border-right: 1rpx solid #EEEEEE;
      }
    }
  }
}

.text-line2 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.text-line {
  
}

// 已下架
.zhez {
  width: 190rpx;
  height: 190rpx;
  background: #000000;
  opacity: 0.5;
  border-radius: 10rpx;
  text-align: center;
  line-height: 170rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
